<template>
    <sub-menu 
        :key="data.id">
        <template #title>{{ data.title }}</template>
        <template #sub >
            <template v-for="c of data.child" >
                <menu-item 
                    v-if="!c.child" 
                    :key="c.id">{{ c.title }}</menu-item>
                <circle-item 
                    v-else 
                    :key="c.id"
                    :data="c"></circle-item>
            </template>
        </template>
    </sub-menu>
</template>

<script>
import SubMenu from './subMenu.vue';
import MenuItem from './menuItem.vue'

export default {
    name: 'CircleItem',
    components: {
        SubMenu,
        MenuItem
    },
    props: ['data']
}
</script>

<style>

</style>